<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>后台支出管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/gradesign/css/bootstrap-datetimepicker.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/sweetalert.css"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	html{width: 98.5% !important;}
		body{
        	background:transparent;
   			 }
   		.form-control{width:auto;}
   		.control{width:100% !important}
   		.strange{width:auto}
   		.th-inner {background-color:#f4f4f4}
   		section{
    		margin:0px 20px;
    	}
    	table{table-layout:fixed}
    	td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>后台支出管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-horizontal" >
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label for="pay_id" class="control-label col-sm-4">ID：</label>
						<div class="col-sm-8">
							<input type="text" id="pay_id" class="form-control"></input>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label class="col-sm-4 control-label" for="pay_family">家庭：</label>
						<div class="col-sm-8">
							<input type="text" id="pay_family" class="form-control col-sm-8"></input>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">账期：</label>
						<div class="col-sm-4 date form_date " >
							<input type="text" class="form-control control" id="pay_date" placeholder="起始日期" />
						</div>
						<div class="col-sm-4 " >
							<input type="text" class="form-control control" id="pay_date_end" placeholder="结束日期" />
						</div>
					</div>
				</div>
				
			</div>
			<div class="col-sm-12 row">
				<div align="right" class="form-group">
					<button type="button" id="editBtn" class="btn btn-primary" onclick="initDataGrid()"><span class="glyphicon glyphicon-search"></span>查询</button>
					<button type="button" id="editBtn" class="btn btn-primary" onclick="clearParams()"><span class="glyphicon glyphicon-refresh"></span>清空</button>				
				</div>
			</div>
		</form>
		<table id="dataGrid">
		</table>
	</section>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/yongqi.js"></script>
<script type="text/javascript" src="/gradesign/js/sweetalert.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
	//初始化
	$(function(){
		initDataGrid();
	});
	function initDataGrid(){
		$("#dataGrid").bootstrapTable('destroy');
		// 创建bootstraptable
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/back/pay/query",
			queryParams : queryParam,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10,20,30,40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			toolbar : "#toolbar",//工具栏
			columns : [{
				title : "Id",
				field : "id",
				width : "18%"
			},{
				title : "家庭账号",
				field : "familyAccount",
				width : "5%"
			},{
				title : "项目",
				field : "item",
				width : "15%"
			},{
				title : "日期",
				field : "date",
				width : "10%"
			},{
				title : "金额",
				field : "money",
				width : "10%"
			},{
				title : "成员",
				field : "member",
				width : "10%"
			},{
				title : "账单类型",
				field : "type",
				width : "8%"
			},{
				title : "账单类型详细",
				field : "typeDetail"
			},{
				title : "备注",
				field : "tip"
			},{
				title : "操作",
				field : "operate",
				formatter : "operateFormatter",
				width : "5%"
			}],
		});
	}
	function queryParam(params){
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder,
				id : $("#pay_id").val(),
				family : $("#pay_family").val(),
				date : $("#pay_date").val(),
				date_end : $("#pay_date_end").val()
		};
		return param;
	};
	function operateFormatter(value,row,index){
		var id = "\'"+row.id+"\'";
		return '<a><span style="margin:5px" class="glyphicon glyphicon-trash" onclick="deleteById('+id+')"></span></a>';
	}
	function deleteById(id){
		var params = {};
		yongqi.allAjax("/gradesign/back/pay/delete?id="+id,"",function(){
			swal("删除一条支出信息","","success");
			$("#dataGrid").bootstrapTable('refresh');
		})
	}
	function clearParams(){
		$("#pay_id").val("");
		$("#pay_family").val("");
		$("#pay_date").val("");
		$("#pay_date_end").val("");
	}
	$('#pay_date').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
	$('#pay_date_end').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
	
</script>
</html>